<style scoped lang="scss">
// 定义颜色变量
$primary-color: #FF6040;
$primary-light-color: #FF8A80;
$white-color: #fff;
$bg-color: #fafafa;
$text-color: #323233;

.cart {
  height: 100%;
  width: 10rem;
  overflow: hidden;

  .list-top {
    width: 10rem;
    height: 1.0667rem;
    background-color: $primary-color;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
  }

  .list-top span {
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    border-top: 1px solid $white-color;
    border-right: 1px solid $white-color;
    transform: rotate(225deg);
    margin: 0 0.4rem;
    position: absolute;
    left: 0;
    top: 0.4533rem;
  }

  .list-top p {
    font-size: 0.4267rem;
    color: $white-color;
    position: absolute;
    left: 1.0667rem;
    top: 0.2533rem;
  }

  .list-top h2 {
    font-size: 0.48rem;
    color: $white-color;
    margin: 0 0.4rem;
    font-weight: 400;
  }

  .list-inputnavbox {
    width: 10rem;
    height: 2.4rem;
    background: linear-gradient($primary-color, $primary-light-color);
  }

  .list-inputnavbox .list-input {
    width: 10rem;
    height: 1.44rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-inputnavbox .list-input input {
    width: 9.36rem;
    height: 0.9067rem;
    border: none;
    outline: none;
    border-radius: 0.6667rem;
  }

  .list-inputnavbox .list-navbox {
    width: 10rem;
    height: 1.0667rem;
  }

  .list-inputnavbox .list-navbox ul {
    width: 10rem;
    height: 1.0667rem;
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: $white-color;
  }

  .list-inputnavbox .list-navbox ul li {
    cursor: pointer;
    font-size: 0.4267rem;
    display: flex;
    align-items: center;
  }

  .list-inputnavbox .list-navbox ul li span {
    font-size: 0.32rem;
  }

  .list-center {
    width: 10rem;
  }

  .list-center .box-center-top {
    width: 10rem;
  }

  .list-center .box-center-top .center-box {
    width: 9.1733rem;
    height: 2.3467rem;
    padding: 0.2133rem 0.4267rem;
    background-color: $bg-color;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.2667rem;
  }

  .list-center .box-center-top .center-box .center-left {
    width: 2.3467rem;
    height: 2.3467rem;
  }

  .list-center .box-center-top .center-box .center-left img {
    width: 2.3467rem;
    height: 2.3467rem;
  }

  .list-center .box-center-top .center-box .center-right {
    width: 6.5867rem;
    height: 2.3467rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    color: $text-color;
  }

  .list-center .box-center-top .center-box .center-right h3 {
    font-size: 0.3733rem;
    font-weight: 500;
  }

  .list-center .box-center-top .center-box .center-right h4 {
    font-weight: 500;
    font-size: 0.4267rem;
  }

  .list-center .box-center-top .center-box .center-right p {
    font-weight: 500;
    font-size: 0.5333rem;
  }

  .list-center .box-center-buttom {
    width: 10rem;
    height: 1.0667rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.4267rem;
    font-size: 0.4267rem;
  }
}
</style>
<template>
  <div class="cart">
    <div class="list">
      <div class="list-top">
        <a href="#">
          <span></span>
          <p>
            返回
          </p>
        </a>
        <h2>
          商品列表
        </h2>
      </div>
      <div class="list-inputnavbox">
        <div class="list-input">
          <input type="text" placeholder="     🔍  请输入搜索关键字">
        </div>
        <div class="list-navbox">
          <ul>
            <li>综合排序</li>
            <li>销量</li>
            <li class="pai">价格<span>⬆</span></li>
            <li>好评度</li>
            <li>店铺</li>
            <li>筛选</li>
          </ul>
        </div>
      </div>
      <div class="list-center">
        <div class="box-center-top">
          <!-- <div class="center-box">
          <div class="center-left">
            <img src="" alt="">
          </div>
          <div class="center-right">
            <h3>
              小米10
            </h3>
            <h4>
              描述信息
            </h4>
            <p>
              ￥1000
            </p>
          </div>
        </div> -->
        </div>
        <div class="box-center-buttom">
          没有更多了
        </div>
      </div>
    </div>
  </div>
</template>
<script>

</script>